<template>
  <div class="page pt-12 fz-14 white">
    <van-nav-bar
      title="旅游攻略详情"
      fixed
      left-arrow
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <div class="top-image">
      <img class="responsive" :src="data.thumb" />
    </div>
    <div class="top px-3 mt-2">
      <div style="flex: 1;">
        <h3 class="title max-line-2 my-1">{{ data.title }}</h3>
        <div class="author">
          <img :src="avatar" class="avatar" />
          <span class="ml-2">
            作者：<i>{{ data.author }}</i>
          </span>
        </div>
      </div>
      <div class="thumb_up" @click="favorite">
        <div class="thumb_up-icon">
          <icon-svg
            icon-class="favorite"
            style="font-size: 22px; "
            :class="{
              'red--text text--accent-2': isCollect,
              'brown--text text--lighten-5': !isCollect,
            }"
          ></icon-svg>
        </div>
        <div class="counts">{{ favCounts }}</div>
      </div>
      <div class="thumb_up ml-2" @click="thumbUp">
        <div class="thumb_up-icon">
          <van-icon name="good-job" />
        </div>
        <div class="counts">{{ upCounts }}</div>
      </div>
    </div>
    <div class="content px-3" v-html="data.describe"></div>
  </div>
</template>
<script>
import { fetchData, randAvatar, favToggle } from '@/api/article'
import { get } from '@/utils/auth'
export default {
  data() {
    return {
      data: {
        Title:
          '旅游攻略的标题旅游攻略的标题旅游攻略的标题旅游攻略的标题旅游攻略的标题',
      },
      upCounts: 0,
      favCounts: 0,
      isCollect: false,
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    },
    avatar() {
      return randAvatar(this.id)
    },
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const userId = this.$store.state.user.userId || get('user_id')

      const { data, code } = await fetchData(this.id, userId)
      if (code === 0) {
        this.data = data
        this.upCounts = parseInt(data.hits) || 0
        this.favCounts = parseInt(data.fav) || 0
        if (data.isFavorite) this.isCollect = true
      }
    },
    async favorite() {
      const token = this.$store.state.user.token
      const { msg, code, data } = await favToggle(this.id, token)
      if (code === 0) {
        if (data.msg === '收藏成功') {
          ++this.favCounts
          this.isCollect = true
          this.$toast('已收藏')
        } else if (data.msg === '操作成功') {
          --this.favCounts
          this.isCollect = false
          this.$toast('已取消')
        }
      } else {
        this.$toast(msg)
      }
    },
    async thumbUp() {
      const { code, msg } = await this.$store.dispatch('like/thumb', this.id)
      if (typeof code !== 'undefined') {
        this.$toast(msg)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.top-image {
  img {
    max-height: 165px !important;
    object-fit: cover;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  .author {
    display: flex;
    align-items: center;
    .avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }
    i {
      font-style: normal;
      color: #ff5f3e;
    }
  }
  .thumb_up {
    align-self: center;
    display: flex;
    flex-direction: column;
    .thumb_up-icon {
      font-size: 22px;
      line-height: 0.8;
      color: #ff5f3e;
      align-self: center;
    }
    .counts {
      color: #ff5f3e;
      text-align: center;
    }
  }
}
.content {
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  /deep/ img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 12px;
  }
}
</style>
